<template>
  <div>
    <h1>event</h1>
    <!-- 
      知识点：
            1、事件对象 event 的数据类型声明 ： MouseEvent；
            2、hooks
      需求：获取 鼠标点击页面的 当前位置的坐标
      解析：
            通过 页面点击事件 中 event事件对象 中 pageX和pageY 得到坐标。
            (1)页面点击事件 addEventListener()
            (2)event事件对象  e:MouseEvent 事件对象的类型声明：MouseEvent
            (3)pageX和pageY   
     -->
    <h1>当前位置的x坐标：{{ x }}</h1>
    <h1>当前位置的y坐标：{{ y }}</h1>
  </div>
</template>

<script lang="ts">
import { defineComponent, onMounted, ref, onUnmounted } from 'vue'

export default defineComponent({
  setup() {
    const x = ref(0)
    const y = ref(0)

    //创建getPostion函数--事件回调函数
    function getPostion(e: MouseEvent) {
      console.log(e)//事件对象
      console.log(e.pageX)//获取鼠标当前位置 水平 坐标
      console.log(e.pageY)//获取鼠标当前位置 垂直 坐标
      //将获取到的坐标 赋值给 x,y
      x.value = e.pageX;
      y.value = e.pageY;
    }
    //点击页面获取 x y 的值
    //浏览器界面的document.document上面绑定事件， document是DOM元素
    //什么时候能操作dom元素，在组合api onMounted 当中
    onMounted(() => {
      //在这里给document 添加点击事件，获取坐标
      document.addEventListener('click', getPostion)
    })
    //离开取消事件  将取消事件放到onUnmounted
    onUnmounted(() => {
      //离开页面时取消事件 getPostion
      document.removeEventListener('click', getPostion)
    })

    return {
      x,
      y
    }
  }
})
</script>

<style scoped>

</style>